<template>
  <div>
 <!--pic-->
  <mt-swipe :auto="4000" >
  <mt-swipe-item><h1>first!</h1></mt-swipe-item>
  <mt-swipe-item><h1>second!</h1></mt-swipe-item>
  <mt-swipe-item><h1>third!</h1></mt-swipe-item>
  </mt-swipe>
  <!--grid cell-->
   <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="home/newslist">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-image"></span>
		                    <div class="mui-media-body">图片浏览</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-compose"></span>
		                    <div class="mui-media-body">Chat</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-map"></span>
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">Phone</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">Setting</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">home</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">more</div></a></li>
		        </ul> 
   


  </div>
</template>

<script>
export default {
  data() {
    return {
      lunbotuList: [] // 保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      // 获取轮播图数据的方法
      this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
        //console.log(result.body);
        if (result.body.status === 0) {
          // success
          this.lunbotuList = result.body.message;
        } else {
          // fault
          Toast("图片加载失败");
        }
      });
    }
  }
};

</script>

<style lang="scss" scoped>
.mint-swipe{
  height:200px;
  .mint-swipe-item:nth-child(1){
    background-color: coral;
  }
  .mint-swipe-item:nth-child(2){
    background-color:cadetblue;
  }
  .mint-swipe-item:nth-child(3){
    background-color:midnightblue;
  }
  h1{
    color:mintcream;
    text-align: center;
    margin-top:50px;
  }
}
</style>
